<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>My App</title>
    <link rel="stylesheet" href="../../packages/core/css/framework7.min.css">
    <link rel="stylesheet" href="../../css/framework7-icons.css">
  </head>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="https://unpkg.com/react@16.4.1/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16.4.1/umd/react-dom.production.min.js"></script>
    <script src="../../packages/react/framework7-react.min.js"></script>
    <script src="../../packages/core/js/framework7.min.js"></script>
    <script type="text/babel">
      class AppComponent extends React.Component {
        constructor() {
          super();
          this.state = {
            actionGridOpened: false,
            oneGroupOpened: false
          };
        }
        componentWillUnmount() {
          if (this.actionsToPopover) {
            this.actionsToPopover.destroy();
          }
        }
      
        openActionsPopover() {
          const app = this.$f7;
      
          if (!this.actionsToPopover) {
            this.actionsToPopover = app.actions.create({
              buttons: [
                {
                  text: 'Do something',
                  label: true,
                },
                {
                  text: 'Button 1',
                  bold: true,
                },
                {
                  text: 'Button 2',
                },
                {
                  text: 'Cancel',
                  color: 'red',
                },
              ],
              // Need to specify popover target
              targetEl: this.buttonToPopoverWrapper.querySelector('.button-to-popover'),
            });
          }
      
          // Open
          this.actionsToPopover.open();
        }
      
        setOneGroupOpened(oneGroupOpened) {
          this.setState({
            oneGroupOpened
          });
        }
      
        setActionsGridOpened(actionGridOpened) {
          this.setState({
            actionGridOpened
          });
        }
        render() {
          return (
            <App>
              <View main>
                <Page>
                  <Navbar title="Action Sheet" />
                  <Block strong>
                    <p className="row">
                      {/* One group, open by direct accessing instance .open() method */}
                      <Button className="col" raised onClick={() => this.refs.actionsOneGroup.open()}>One group</Button>
                      {/*  Two groups, open by "actionsOpen" attribute */}
                      <Button className="col" raised actionsOpen="#actions-two-groups">Two groups</Button>
                    </p>
                    <p>
                      {/* Actions Grid, open by changing actionGridOpened state property */}
                      <Button raised onClick={() => this.setActionsGridOpened(true)}>Action Grid</Button>
                    </p>
                  </Block>
      
                  <BlockTitle>Action Sheet To Popover</BlockTitle>
                  <Block strong>
                    <p ref={e => this.buttonToPopoverWrapper = e}>
                      Action Sheet can be automatically converted to Popover (for tablets). This button will open Popover on tablets and Action Sheet on phones:
                      <Button
                        style={{ display: 'inline-block' }}
                        className="button-to-popover"
                        onClick={this.openActionsPopover.bind(this)}>
                          Actions
                        </Button>
                    </p>
                  </Block>
      
                  {/* One Group */}
                  <Actions ref="actionsOneGroup">
                    <ActionsGroup>
                      <ActionsLabel>Do something</ActionsLabel>
                      <ActionsButton bold>Button 1</ActionsButton>
                      <ActionsButton>Button 2</ActionsButton>
                      <ActionsButton color="red">Cancel</ActionsButton>
                    </ActionsGroup>
                  </Actions>
      
                  {/* Two Groups */}
                  <Actions id="actions-two-groups">
                    <ActionsGroup>
                      <ActionsLabel>Do something</ActionsLabel>
                      <ActionsButton bold>Button 1</ActionsButton>
                      <ActionsButton>Button 2</ActionsButton>
                    </ActionsGroup>
                    <ActionsGroup>
                      <ActionsButton color="red">Cancel</ActionsButton>
                    </ActionsGroup>
                  </Actions>
      
                  {/* Grid */}
                  <Actions grid={true} opened={this.state.actionGridOpened} onActionsClosed={() => this.setActionsGridOpened(false)}>
                    <ActionsGroup>
                      <ActionsButton>
                        <img slot="media" src="http://lorempixel.com/96/96/people/1" width="48"/>
                        <span>Button 1</span>
                      </ActionsButton>
                      <ActionsButton>
                        <img slot="media" src="http://lorempixel.com/96/96/people/2" width="48"/>
                        <span>Button 2</span>
                      </ActionsButton>
                      <ActionsButton>
                        <img slot="media" src="http://lorempixel.com/96/96/people/3" width="48"/>
                        <span>Button 3</span>
                      </ActionsButton>
                    </ActionsGroup>
                    <ActionsGroup>
                      <ActionsButton>
                        <img slot="media" src="http://lorempixel.com/96/96/fashion/4" width="48"/>
                        <span>Button 4</span>
                      </ActionsButton>
                      <ActionsButton>
                        <img slot="media" src="http://lorempixel.com/96/96/fashion/5" width="48"/>
                        <span>Button 5</span>
                      </ActionsButton>
                      <ActionsButton>
                        <img slot="media" src="http://lorempixel.com/96/96/fashion/6" width="48"/>
                        <span>Button 6</span>
                      </ActionsButton>
                    </ActionsGroup>
                  </Actions>
                </Page>
              </View>
            </App>
          )
        }
      }
    </script>
    <script>
      var theme = 'ios';
      if (location.href.indexOf('theme=md') >= 0) theme = 'md';
      
      if (Framework7.use) Framework7.use(Framework7React, { theme: theme });
      else if (Framework7.Class && Framework7.Class.use) Framework7.Class.use(Framework7React, { theme: theme });
      
      var plugin = {
        params: {
          theme: theme,
        }
      };
      
      if (Framework7.use) Framework7.use(plugin);
      else if (Framework7.Class && Framework7.Class.use) Framework7.Class.use(plugin);
      
      window.onload = function () {
        if (typeof AppComponent !== 'undefined') {
          ReactDOM.render(
            React.createElement(AppComponent),
            document.getElementById('app')
          );
        }
      }
    </script>
  </body>
</html>